<script setup lang="ts">
import {reactive, ref, toRaw, toRef, toRefs} from "vue";

const man = reactive({
  name: 'aaa',
  age: 123,
  like: "read"
})
//只对响应式对象有效
const like = toRef(man, 'like')

const change = () => {
  // man.age = 333
  like.value = "write"
  console.log(man)
  //变为非响应式(Proxy)的普通对象
  console.log(toRaw(man))
}
// 多属性分离响应式对象
// const {name, age, like} = toRefs(man)

</script>

<template>
  <div>
    {{ man }}
    toRef:{{ like }}
    <!--    {{ name, age, likee }}-->
  </div>
  <div>
    <button @click="change">修改</button>
  </div>
</template>

<style scoped>
body {
  font-size: 30px;
}
</style>